// Suspense 表示的是延时操作，当我们有模块是懒加载的时候，先显示它的内容
// lazy react提供的懒加载方法
import { lazy, Suspense } from 'react'
import { Switch, BrowserRouter } from 'react-router-dom'
// 全局loading
import { Spin } from 'antd'
// 导入路由守卫
import RouteGuard from './routeGuard'
// 主页、登陆页、注册页、公用组件之类的，都不打成懒加载的包而是与主文件放在一块
import Home from '@/pages/Home'
import Login from '@/pages/Login'

const routes = [
  {
    path: '/',
    // 普通的加载方式，会与主文件包打在一起
    component: Home,
    unAuth: true, // 如果是true,表示不需要登陆，false或不传，表示需要登陆
    // unBagUp: true, // 如果是true 则不显示tabbar , 如果是false就显示
  },
  {
    path: '/login',
    component: Login,
    unAuth: true,
    unBagUp: true,
  },
  // 在进行路由守卫的授权验证时，一般来说，我们只需判断当前主模块是否需要授权认证即可
  {
    path: '/car',
    // 使用懒加载的方式导入组件模块，需要等到访问这个路由时才加载，是一个独立的文件
    component: lazy(() => import('../pages/Car')),
  },
  {
    path: '/member',
    component: lazy(() => import('../pages/Member')),
    unBagUp: true,
  },
  {
    path: '/tools',
    component: lazy(() => import('../pages/Tools')),
    unAuth: true,
    unBagUp: true,
  },
  {
    path: '/order',
    component: lazy(() => import('../pages/Order')),
    unBagUp: true,
  },
]

export default function Router() {
  return (
    <Suspense
      // switch里没有匹配到对应的内容时，显示这个
      fallback={<Spin className="global-loading" size="large" tip="加载中, 请稍候..." />}
    >
      <BrowserRouter>
        <Switch>
          <RouteGuard routes={routes} />
        </Switch>
      </BrowserRouter>
    </Suspense>
  )
}
